<template>
  <div class="pay-status"  v-if="orderInfo.order_id">
    <div class="pay-status-complete">
      <i class="iconfont icon-icon_success theme-customize-font"></i>
      <p class="ET4 MT3">{{t('payState_payment_successful')}}</p>
    </div>
    <div class="pay-tip" v-if="!isSDK">{{t('payState_enter_profileOrder')}}</div>
    <earn-integral
      v-if="orderInfo.order_id"
      :orderId="orderInfo.order_id"
      :isAlive="isAlive"
    ></earn-integral>
    <!-- 按钮 -->
    <button-coupons
		v-if="showButton"
		:orderInfo="orderInfo"
		:btnText="t('payState_buttonTxt')"
    >
    </button-coupons>
  </div>
</template>

<script>
import earnIntegral from './earnIntegral';
import locale from '../../../../mixins/locale'
import buttonCoupons from './buttonCoupons';
import {  VALUE_COUPON } from '../../constants/constant'
export default {
  	mixins: [locale],
	components: {
		earnIntegral,
		buttonCoupons
	},
	props: {
		orderInfo: {
		type: Object,
		default: {},
		},
		isAlive:{
		type:Number,
		default:0
		},
    isSDK:{
      type:Boolean,
      default: false
    }
	},
	mounted(){
	},
 	computed: {
		showButton(){
			console.log('this.orderInfo.spu_type === VALUE_COUPON',this.orderInfo.spu_type === VALUE_COUPON)
			return this.orderInfo.spu_type === VALUE_COUPON
		}
  	}
};
</script>

<style lang="scss" scoped>
.pay-status {
  text-align: center;
  .pay-status-complete {
    padding: 0.48rem 0 0.24rem;

    i {
      font-size: 1.05rem;
    }

    p {
      font-weight: 400;
    }
  }

  .pay-tip {
    width: 100%;
    font-size: 0.24rem;
    font-weight: 400;
    text-align: center;
    color: rgba(153,153,153,1)
  }
}
</style>
